<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../css/register.css">
    <!--[if IE]>
    <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <link rel="icon" href="../img/asset-favico.ico">
    <title>编辑信息</title>
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/datapicker/datePicker.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script>
        var id = getUrlParam("id");
    </script>
</head>
<body>
<div id="register-app">
    <div class="inner-box">

        <div class="title">用户注册</div>
        <div class="input-box">
            <div  class="input-item-head">用户名</div>
            <input v-model="userName" type="text" class="input-item input-username">
        </div>
        <div class="input-box">
            <div class="input-item-head">手机号</div>
            <input v-model="phone" type="text" class="input-item input-phone">
        </div>
        <div class="input-box">
            <div class="input-item-head">密码</div>
            <input v-model="password" type="password" class="input-item input-phone">
        </div>
        <div class="input-box">
            <div class="input-item-head">性别</div>
            <input class="input-sex male" v-model="sex" value="男" type="radio" name="male"><label for="male">男</label>
            <input class="input-sex female" v-model="sex" value="女" type="radio" name="female"><label for="female">女</label>
        </div>
        <div class="input-box">
            <div class="input-item-head">身份证号</div>
            <input v-model="idCard" type="text" class="input-item input-idcard">
        </div>
        <div class="input-box">
            <div class="input-item-head">邮箱</div>
            <input v-model="email" type="text" class=" input-item input-email">
        </div>

        <div class="button-box">
            <div class="register-btn register-btn-ok"  @click="register">注册</div>
            <div class="register-btn register-btn-cancel" @click="cancel">取消</div>
        </div>
    </div>
</div>
<script>
    const app = new Vue({
        el: "#register-app",
        data: {
            userName: "",
            sex: "男",
            phone: "",
            idCard: "",
            email: "",
            password: ""
        },
        methods:{
            async register(){
                const userInfo = {
                    name: this.userName,
                    sex: this.sex,
                    phoneNumber: this.phone,
                    idCard: this.idCard,
                    email: this.email,
                    password: this.password
                }
                console.log(userInfo)
                const result = await axios.post("http://localhost/member/register.do", userInfo)
                console.log(result)
                if(result.data.flag) {
                    window.alert("注册成功")
                    location.href = "http://localhost/pages/login.html"
                }else {
                    window.alert(`注册失败 ${result.data.message}`)
                }
            },
            cancel(){
                console.log("取消")
            }
        }
    })
</script>
</body>
</html>